<template>
  <view class="component">
    <template v-if="mergeConfig.type === 'default'">
      <view class="form-item-view form-item--default">
        <view
          class="label"
          :style="{width: mergeConfig.labelWidth + 'rpx'}"
          >{{ data.label }}</view
        >
        <view
          class="content"
          :style="{width: mergeConfig.contentWidth + 'rpx'}"
          >{{ data.text }}</view
        >
      </view>
    </template>
    <template v-if="mergeConfig.type === 'space-between'">
      <view
        :class="['form-item-view', 'form-item--space-between', (mergeConfig.disabled ? 'form-item--disabled' : '')]"
      >
        <view
          class="label"
          :style="{width: mergeConfig.labelWidth + 'rpx'}"
          >{{ data.label }}</view
        >
        <view
          class="content"
          :style="{width: mergeConfig.contentWidth + 'rpx'}"
          >{{ data.text ? data.text : '-' }}</view
        >
      </view>
    </template>
    <template v-if="mergeConfig.type === 'link'">
      <view
        :class="`form-item-view form-item--link ${data.text ? '' : 'link--empty'}`"
        @tap="handleClickLink"
      >
        <view
          :class="['label', mergeConfig.required ? 'ui-required' : '']"
          :style="{width: mergeConfig.labelWidth + 'rpx'}"
          >{{ data.label }}</view
        >
        <view class="content" :style="{width: mergeConfig.contentWidth + 'rpx'}"
          >{{ data.text ? data.text : '请选择' }}
          <view class="iconfont icon-a-16_16_arrow_right"></view
        ></view>
      </view>
    </template>
  </view>
</template>

<script setup>
const props = defineProps({
  type: {
    type: String, // 'default' | space-between
    default: 'default'
  },
  /**
   * {
   *  label: '',
   *  text: '',
   * required
   * }
   */
  data: {
    type: Object,
    default: () => {
      return {};
    }
  },
  config: {
    type: Object,
    default: () => {
      return {};
    }
  },
  labelWidth: {
    type: String,
    default: ''
  },
  contentWidth: {
    type: String,
    default: ''
  },
  text: {
    type: String,
    default: ''
  }
});

const mergeConfig = computed(()=>{
  return {
    type: props.type,
   ...props.config,
    labelWidth: props.config.labelWidth || props.labelWidth,
    contentWidth: props.config.contentWidth || props.contentWidth
  }

});

const emit = defineEmits(['onLink']);

const handleClickLink = ()=> {
  emit('onLink', props.data);
}
</script>

<style lang="scss" scoped>
@import "@/static/scss/theme.scss";

.form-item {
  &-wrap {
    display: flex;
    flex-direction: column;
  }

  &-view {
    display: flex;
    align-items: center;
  }

  &--disabled {
    .content {
      color: $text-l3-color;
    }
  }

  &--link {
    justify-content: space-between;
    &.link--empty {
      .content {
        color: $text-l3-color;
      }
      .iconfont {
        font-size: 32rpx;
      }
    }
  }
  &--space-between {
    justify-content: space-between;
  }
  &--default {
      font-size: 24rpx;
      display: flex;
      .label {
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        margin-right: 12rpx;
        flex-shrink: 0;
      }

      .content {
        color: var(---, #838599);
        font-style: normal;
        font-weight: 400;
        line-height: 34rpx;
      }
  }

}
</style>
